<!doctype html>
<html>
<head>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
    <meta charset="UTF-8">
    <title>飞行监控</title>
    <link rel="stylesheet" type="text/css" href="/css/ecalendar.css">
    <link rel="stylesheet" href="/css/vendor/common.css" type="text/css">
    <link rel="stylesheet" href="/css/vendor/cmp-controls.css" type="text/css">
    <link href="/css/vendor/zone-manager.less" rel="stylesheet/less" type="text/css">
    <script src="/js/less.min.js"></script>

    <style>
        /* 测区信息************************************************************************************************************************************************************ */
        .zone-info-container {
            width: 290px;
            padding-bottom: 3px;
            background-color: #fefefe;
            color: black;
            font-weight: bolder;
            position: relative;
        }

        .zone-info-container .drone-info {
            height: 18px;
            line-height: 18px;
            font-size: 0.86em;
            font-weight: bolder;
            padding-left: 16px;
        }

        .zone-info-container .zone-info-box {
            padding: 0px 8px;
        }

        .zone-info-container .zone-info-box .zone-info-project-detail {
            height: 14px;
            line-height: 14px;
            padding: 5px 0px 5px 16px;
            font-size: 0.9em;
            position: relative;
        }

        .zone-info-project-item-name-left, .zone-info-project-item-name-right, .zone-info-project-item-value-left, .zone-info-project-item-value-right {
            padding: 0px;
            margin: 0px;
            list-style-type: none;
            position: absolute;
            bottom: 0px;
        }

        .zone-info-project-item-name-left {
            text-align: right;
            width: 54px;
        }

        .zone-info-project-item-name-right {
            text-align: right;
            width: 54px;
            left: 156px;
        }

        .zone-info-project-item-value-left {
            text-align: left;
            left: 80px;
        }

        .zone-info-project-item-value-right {
            text-align: left;
            left: 220px;
        }

        .zone-info-project-item-li {
            height: 21px;
            line-height: 21px;
        }

        #zone-info-mission-list-container {
            width: 100%;
        }

        .zone-info-mission {
            width: 100%;
            font-size: 0.9em;
            margin: 4px 0px;
        }

        .zone-info-fold-icon {
            float: right;
            margin-right: 6px;
            margin-top: 3px;
        }

        .zone-info-mission-name {
            height: 24px;
            line-height: 24px;
            padding-left: 20px;
            margin: 0px 7px 0px 10px;
        }

        .zone-info-mission-list {
            margin: 0px;
            padding: 0 0 0 30px;
            list-style-type: none;
        }

        .zone-info-mission-li {
            height: 26px;
            line-height: 26px;
        }

        .zone-info-mission-play-icon {
            max-width: 16px;
            max-height: 16px;
            float: right;
            margin-right: 44px;
            margin-top: 4px;
        }

        .zone-info-container .play-button {
            height: 38px;
            line-height: 38px;
            text-align: center;
            margin: 10px 16px;
            border-radius: 20px;
            background-color: #42A9FF;
            color: white;
            cursor: pointer;
        }

        .zone-info-container .play-button-red {
            height: 38px;
            line-height: 38px;
            text-align: center;
            margin: 10px 16px;
            border-radius: 20px;
            color: white;
            background-color: #ff6602;
            cursor: pointer;
        }


    </style>
</head>

<body>
<div class="map-wrap">
    <!-- 地图容器 -->
    <div id="google-map-container" style="position: relative; width: 100%; height: 100%;"></div>
</div>

<div class="flight-data-wrap">
    <img class="total-icon" src="/images/zone-manager/zone-manager-flight-cnt.png">
    <label id="totalMission">0</label>
    <div onclick="clickRealFlying()" class="flying-entrance-wrap">
        <p class="des">正在飞行</p>
        <div class="drone"></div>
    </div>
    <label onclick="clickRealFlying()" id="current-flying">0</label>
</div>

<div id="zone-manager-info-wrap" class="hide">
    <table class="menu" cellpadding="0" cellspacing="0">
        <tr>
            <td class="select button" onClick="zoneManagerM.clickInfoMenuItem(this)">任务列表</td>
            <td class="button" onClick="zoneManagerM.clickInfoMenuItem(this)">飞机列表</td>
        </tr>
    </table>

    <!-- 任务列表信息 -->
    <div id="mission-list-wrap" class="data-wrap">
        <div class="search-wrap">
            <input name="mission-search" id="mission-search-name" placeholder="飞机编号" type="text"/>
            <span class="icon-wrap button" onclick="SysMapManager.VIEW.searchMissionList()">
			    	<img src="/images/zone-manager/zone-manager-search.png">
			    </span>
        </div>
        {% if loginUser.isSystemAdmin %}

            <table class="filter-list sub-system">
                <tr>
                    <td class="title">子系统:</td>
                    <td>
                        <div class="cmp-option-menu" style="width: 100%;">
                            <label value="-1" id="filter-subsystem">请选择</label>
                            <div class="table-wrap">
                                <table cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td><span value="-1">请选择</span><label></label></td>
                                    </tr>
                                    {% for key,value in subsystems %}
                                        <tr>
                                            <td><span value="{{ key }}">{{ value }}</span><label></label></td>
                                        </tr>
                                    {% endfor %}

                                </table>
                            </div>
                        </div>
                        <img src="/images/zone-manager/zone-manager-calendar-toggle.png"/>
                    </td>
                </tr>
            </table>
        {% endif %}
        <table class="filter-list duration">
            <tr>
                <td class="title"><span>最</span>近:</td>
                <td style="padding-left: 3px;">
                    <input type="radio" name="filter-duration-from-now" value="one-week" id="filter-one-week">
                    <label for="filter-one-week">本周</label>
                </td>
                <td style="text-align: center;">
                    <input type="radio" name="filter-duration-from-now" value="one-month" id="filter-one-month">
                    <label for="filter-one-month">本月</label>
                </td>
                <td style="text-align: right; padding-right: 4px;">
                    <input type="radio" name="filter-duration-from-now" value="all" id="filter-all" checked>
                    <label for="filter-all">全部</label>
                </td>
            </tr>
        </table>
        <table class="filter-list time">
            <tr>
                <td class="title">时间段:</td>
                <td>
                    <div class="item" id="time-start">
                        <span>开始</span><img src="/images/zone-manager/zone-manager-calendar-toggle.png"/>
                    </div>
                </td>
                <td>
                    <div class="item" style="float: right;" id="time-end">
                        <span>今天</span><img src="/images/zone-manager/zone-manager-calendar-toggle.png"/>
                    </div>
                </td>
            </tr>
        </table>
        <div class="list-wrap">
            <ul class="select-list" id="menu-mission-list">


            </ul>
        </div>
    </div>

    <!-- 飞机列表信息 -->
    <div id="drone-list-wrap" class="data-wrap">

        <div class="drone-list">

            <ul class="list select-list" id="plane-list">

            </ul>
        </div>
    </div>
</div>
<div class="mark-switch">
    <p class="title">启用隐藏</p>
    <div id="history-marker-switch" class="switch history-open"></div>
    <div id="real-marker-switch" class="switch realtime-open"></div>
</div>

<table class="tool-bar" cellpadding="0" cellspacing="0">
    <tr>
        <td onClick="zoneManagerM.clickInfoListHideToggle(this)">列表显示</td>
        <td onClick="SysMapManager.VIEW.clickChangeMakerMode(this)" id="marker_mode">标记模式</td>
    </tr>
</table>
<div id="mission-info-map" style="display: none;visibility:hidden">
    <div class="zone-info-container">
        <section
                style="height: 30px; line-height: 30px; padding-left: 18px; font-weight: 200; font-size: 0.9em; background-color: black; color: white;">
            任务信息
        </section>
        <img style="position: absolute; right: 10px; top: 8px;" id="btn-close-info-window" onclick="closeInfoWindow()"
             src="/images/stat/close_btn.png">
        <img style="width: 100%;" src="/images/stat/plane_F200.jpg" id="block-image-plane-type">
        <section class="drone-info">飞机型号 :
            <item id="task-plane-type"></item>
        </section>
        <section class="drone-info">飞机编号 :
            <item id="task-drone-serial"></item>
        </section>
        <section class="drone-info">联系电话 :
            <item id="task-drone-contact"></item>
        </section>
        <section style="height: 2px; width: 100%; margin: 10px 0px; background-color:#BDBDBD;"></section>

        <div class="zone-info-box">
            <section style="margin-left: 14px; font-size: 0.9em;" id="block-name"></section>
            <div class="zone-info-project-detail" style="height: 104px;">
                <ul class="zone-info-project-item-name-left">
                    <li class="zone-info-project-item-li">飞机型号</li>
                    <li class="zone-info-project-item-li">相机类型</li>
                    <li class="zone-info-project-item-li">GSD</li>
                    <li class="zone-info-project-item-li">航向重叠</li>
                    <li class="zone-info-project-item-li">海拔高度</li>
                </ul>
                <ul class="zone-info-project-item-value-left">
                    <li class="zone-info-project-item-li" id="block-plane-type"></li>
                    <li class="zone-info-project-item-li" id="block-camera-type"></li>
                    <li class="zone-info-project-item-li" id="block-gsd">0cm</li>
                    <li class="zone-info-project-item-li" id="block-longitudinal-overlap">0%</li>
                    <li class="zone-info-project-item-li" id="block-flight-altitude">0m</li>
                </ul>
                <ul class="zone-info-project-item-name-right">
                    <li class="zone-info-project-item-li">比例尺</li>
                    <li class="zone-info-project-item-li">旁向重叠</li>
                    <li class="zone-info-project-item-li">飞行高度</li>
                </ul>
                <ul class="zone-info-project-item-value-right">
                    <li class="zone-info-project-item-li" id="block-work-scale"></li>
                    <li class="zone-info-project-item-li" id="block-lateral-overlap">0%</li>
                    <li class="zone-info-project-item-li" id="block-flight-relative-altitude">0m</li>
                </ul>
            </div>
            <div class="zone-info-project-detail" style="height: 54px; margin-top: 12px;">
                <section style="padding-left: 4px;">最高点</section>
                <ul class="zone-info-project-item-name-left">
                    <li class="zone-info-project-item-li">GSD</li>
                    <li class="zone-info-project-item-li">航向重叠</li>
                </ul>
                <ul class="zone-info-project-item-value-left">
                    <li class="zone-info-project-item-li" id="block-high-gsd">0cm</li>
                    <li class="zone-info-project-item-li" id="block-high-longitudinal-overlap">0%</li>
                </ul>
                <ul class="zone-info-project-item-name-right">
                    <li class="zone-info-project-item-li">海拔高度</li>
                    <li class="zone-info-project-item-li">旁向重叠</li>
                </ul>
                <ul class="zone-info-project-item-value-right">
                    <li class="zone-info-project-item-li" id="block-survey-highest-altitude">0m</li>
                    <li class="zone-info-project-item-li" id="block-high-lateral-overlap">0%</li>
                </ul>
            </div>
            <div class="zone-info-project-detail" style="height: 32px; margin-top: 14px;">
                <section style="padding-left: 4px;">最低点</section>
                <ul class="zone-info-project-item-name-left">
                    <li class="zone-info-project-item-li">GSD</li>
                </ul>
                <ul class="zone-info-project-item-value-left">
                    <li class="zone-info-project-item-li" id="block-low-gsd">0cm</li>
                </ul>
                <ul class="zone-info-project-item-name-right">
                    <li class="zone-info-project-item-li">海拔高度</li>
                </ul>
                <ul class="zone-info-project-item-value-right">
                    <li class="zone-info-project-item-li" id="block-survey-lowest-altitude">0m</li>
                </ul>
            </div>
            <section class="zone-info-project-detail">
                <section class="zone-info-separate-line" style="left: 20px;"></section>
            </section>
            <div class="zone-info-project-detail" style="height: 46px;">
                <ul class="zone-info-project-item-name-left">
                    <li class="zone-info-project-item-li">航线间距</li>
                    <li class="zone-info-project-item-li">默认空速</li>
                    <li class="zone-info-project-item-li">预计面积</li>
                </ul>
                <ul class="zone-info-project-item-value-left">
                    <li class="zone-info-project-item-li" id="block-flight-interval">0m</li>
                    <li class="zone-info-project-item-li" id="block-default-air-speed">0m/s</li>
                    <li class="zone-info-project-item-li">
                        <item id="block-work-area"></item>
                        km&sup2;</li>
                </ul>
                <ul class="zone-info-project-item-name-right">
                    <li class="zone-info-project-item-li">拍照间距</li>
                    <li class="zone-info-project-item-li">预计时间</li>
                    <li class="zone-info-project-item-li">预计里程</li>
                </ul>
                <ul class="zone-info-project-item-value-right">
                    <li class="zone-info-project-item-li" id="block-take-pic-interval">0m</li>
                    <li class="zone-info-project-item-li" id="block-work-time">0min</li>
                    <li class="zone-info-project-item-li" id="block-work-mileage">0km</li>
                </ul>
            </div>
        </div>
        <div class="play-button" id="block-play-button" onMouseDown="clickPlayMission()">
            <img style="position: relative; top: 2px;" src="/images/stat/play_btn.png">&nbsp;<span
                    id="block-play-button-text">任务回放</span>
        </div>
    </div>
</div>

<div style="display: none">
    <div id="missionList">{{ missionList }}</div>
    <div id="useMissionList">{{ useMissionList }}</div>
    <div id="isGeted">{{ isGeted }}</div>
    <div id="chartDate">{{ chartDate }}</div>
    <div id="useTime">{{ useTime }}</div>
    <div id="milTimes">{{ milTimes }}</div>
    <div id="start-time">{{ startDate }}</div>
    <div id="end-time">{{ endDate }}</div>
    <div id="mil-total">{{ milTotal }}</div>
    <div id="fsTotal">{{ fsTotal }}</div>

    <label id="user">{{ user }}</label>
    <label id="uas_serial_id">{{ uas_serial_id }}</label>
    <label id="startDate">{{ startDate }}</label>
    <label id="endDate">{{ endDate }}</label>
    <label id="showSpace">{{ showSpace }}</label>
    <label id="planeModel">{{ planeModel }}</label>
    <label id="filterTime">{{ filterTime }}</label>
    <label id="filterDistance">{{ filterDistance }}</label>
    <label id="landingMethod">{{ landingMethod }}</label>
    <label id="warrantyAt">{{ warrantyAt }}</label>
    <label id="planeList">{{ planeList }}</label>
</div>
</body>

<script src="/js/jquery-3.2.1.min.js"></script>
<script src="/js/Ecalendar.jquery.min.js"></script>
<script src="/js/vendor/cmp-controls.js"></script>
<script src="/js/validator.min.js"></script>
<script src="/js/vendor/common.js"></script>
<script src="/js/vendor/zone-manager.js"></script>

{% include 'template/baseMap.volt' %}libraries=visualization&{% include 'template/baseMapKey.volt' %}

<script type="text/javascript" src="/js/markerclusterer.js"></script>
<script type="text/javascript" src="/js/vendor/transform.js"></script>
<script type="text/javascript" src="/js/vendor/google-map-manager.js"></script>
<script type="text/javascript" src="/js/vendor/cloudplay/cloud-play-common.js"></script>
<script type="text/javascript" src="/js/vendor/sys-map.js"></script>
<script>
    function clickRealFlying(){
        window.open("/stat/multiScreen");
    }
</script>
</html>






